<template>
  <div class="container">
    <div class="header">
      <div class="header-top">
        <div class="iconfont icon-icon_set_up"></div>
        <div class="head">
          <!-- 获取用户头像; https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html-->
          <open-data type="userAvatarUrl"></open-data>
        </div>
        <div class="iconfont icon-dakaihuihua"></div>
      </div>
      <div class="header-name">
        <!-- 获取用户名字; https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html-->
        <open-data type="userNickName"></open-data>
      </div>
    </div>
    <div class="content">
      <div class="active-list">
        <!-- 个人信息列表 -->
        <div
          class="active-item"
          v-for="(item, index) in buyList"
          :key="index"
        >
          <div class="active-num">
            {{item.num}}
          </div>
          <div class="active-name">
            {{item.name}}
          </div>
        </div>
      </div>

      <div class="order">
        <div class="order-title">
          我的订单
        </div>
        <div class="order-list">
          <!-- 订单信息列表 -->
          <div
            class="order-item"
            v-for="(item,index) in orderList"
            :key="index"
          >
            <div
              class="iconfont"
              :class="item.icon"
            ></div>
            <div class="name">{{item.name}}</div>
          </div>
        </div>
      </div>

      <div
        class="receive-address"
        @tap="handleAddress"
      >
        <div>收货地址管理</div>
        <div class="arrow"></div>
      </div>

      <div class="manage-list">
        <div class="receive-address">
          <div>联系客服</div>
          <div>95555</div>
        </div>
        <div class="receive-address">
          <div>意见反馈</div>
          <div class="arrow"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 个人购买信息列表
        buyList: [
          { num: 0, name: "收藏的店铺" },
          { num: 0, name: "收藏的商品" },
          { num: 0, name: "关注商品" },
          { num: 0, name: "我的足迹" }
        ],
        // 订单列表
        orderList: [
          { icon: "icon-shangchuan", name: "待付款" },
          { icon: "icon-liwu", name: "待收货" },
          { icon: "icon-xiugai", name: "退款/退货" },
          { icon: "icon-zhiding", name: "全部订单" }
        ]
      };
    },
    methods: {
      // 管理收货地址  
      handleAddress() {
        wx.chooseAddress();
      }
    }
  };
</script>

<style scoped lang="scss">
  @import "style.scss";
</style>
